<template>
  <view>
    <view>
      <view class="u-flex u-row-between u-col-center u-p-r-40">
        <view class="user u-p-l-40 u-p-r-40 u-flex u-row-left u-col-center" @click="getUserInfo()">
          <image class="avatar" :src="userInfo.avatarUrl||img"></image>
          <view class="u-p-l-20">
            <view class="name u-font-18" v-if="userInfo">ID:{{userInfo.deviceId}}</view>
            <view class="name u-font-18" v-if="!userInfo">登录/注册</view>
            <view class="addr u-light-color u-p-t-10 u-font-12"><text style="color:#FF5722" v-if="tt!='0分'">畅读阅读剩余{{tt}}</text> <text>{{$t('user.tishi')}}</text></view>
          </view>
        </view>
      </view>
      <!-- 积分总额 -->
      <view class="integral">
        <view class="u-flex u-row-between u-p-30" hover-class="hover-class1" hover-stay-time="50">
          <!-- 左边区域 -->
          <view class="u-flex u-row-left">
            <image src="/static/icon/time.png"></image>
            <view class="u-p-l-20 left">{{$t('user.total_time')}}:</view>
            <view class="left">
			<text>{{time?formatSeconds(time):0}}</text>
			</view>
          </view>
		
          <!-- 右边区域 -->
		
		
        </view>
		<view class="u-flex u-row-left" style="position:absolute;margin-top:-40rpx;margin-left:88rpx;">
		
		  <view class="u-p-l-20 left">{{date}}</view>
		 
		</view>
      </view>
    

      <view class="menu u-m-l-40 u-m-r-40 u-m-t-40 border-box">
	
		<!-- #ifdef MP || H5 -->
		<view class="u-flex u-row-between u-p-30 border-bottom" hover-class="hover-class1" hover-stay-time="50"
		  @click="onClick('timeall')" v-if="config.task_status">
		  <view class="u-flex u-row-left">
		    <image src="/static/icon/bkgz.png"></image>
		    <view class="u-p-l-20">{{$t('user.View')}}</view>
		  </view>
		  <view class="u-flex u-row-right">
		    <view class="arror-right"></view>
		  </view>
		</view>
		<!-- #endif -->
        <view class="u-flex u-row-between u-p-30 border-bottom" hover-class="hover-class1" hover-stay-time="50"
          @click="onClick('task')" v-if="config.task_status==1">
          <view class="u-flex u-row-left">
            <image src="/static/icon/task.png"></image>
            <view class="u-p-l-20">{{$t('user.rw')}}<text style="float: right;">({{$t('user.ad_time')}}{{tt}})</text></view>
          </view>
          <view class="u-flex u-row-right">
            <view class="arror-right"></view>
          </view>
        </view>
        <view class="u-flex u-row-between u-p-30 border-bottom" hover-class="hover-class1" hover-stay-time="50"
          @click="onClick('jilu')">
          <view class="u-flex u-row-left">
            <image src="/static/icon/dd.png"></image>
            <view class="u-p-l-20">{{$t('user.jilu')}}</view>
          </view>
          <view class="u-flex u-row-right">
            <view class="arror-right"></view>
          </view>
        </view>
        <view class="u-flex u-row-between u-p-30 border-bottom" hover-class="hover-class1" hover-stay-time="50"
          @click="onClick('bookshelf_time')">
          <view class="u-flex u-row-left">
            <image src="/static/icon/del.png"></image>
            <view class="u-p-l-20">{{$t('user.yd_time')}}</view>
          </view>
          <view class="u-flex u-row-right">
            <view class="arror-right"></view>
          </view>
        </view>
        <view class="u-flex u-row-between u-p-30 border-bottom" hover-class="hover-class1" hover-stay-time="50"
          @click="onClick('shukudata')">
          <view class="u-flex u-row-left">
            <image src="/static/icon/ddd.png"></image>
            <view class="u-p-l-20">{{$t('user.book_hc')}}</view>
          </view>
          <view class="u-flex u-row-right">
            <view class="arror-right"></view>
          </view>
        </view>
      </view>
      <view class="menu u-m-l-40 u-m-r-40 u-m-t-40 border-box">
        <!-- #ifndef MP-QQ -->
        <view class="u-flex u-row-between u-p-30 border-bottom" style="position: relative;" hover-class="hover-class1"
          hover-stay-time="50" @click="onClick('ment')">
          <view class="u-flex u-row-left">
            <image src="/static/icon/kefu.png"></image>
            <view class="u-p-l-20">{{$t('user.mz')}}</view>
          </view>
          <view class="u-flex u-row-right">
            <view class="arror-right"></view>
          </view>
          <button open-type="contact"
            style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
        </view>
        <!-- #endif -->
        <view class="u-flex u-row-between u-p-30" hover-class="hover-class1" hover-stay-time="50"  @click="onClick('about')">
          <view class="u-flex u-row-left">
            <image src="/static/icon/set.png"></image>
            <view class="u-p-l-20">{{$t('user.about')}}</view>
          </view>
          <view class="u-flex u-row-right">
            <view class="arror-right"></view>
          </view>
        </view>
        <view class="u-flex u-row-between u-p-30" hover-class="hover-class1" hover-stay-time="50" @click="onClick('help')">
          <view class="u-flex u-row-left">
            <image src="/static/icon/help.png"></image>
            <view class="u-p-l-20">{{$t('user.Help')}}</view>  
          </view>
          <view class="u-flex u-row-right">
            <view class="arror-right"></view>
          </view>
        </view>
      </view>
      <view class="" style="height: 180rpx;"></view>
    </view>
	<custom-tab-bar :currentTab="currentTab"></custom-tab-bar>

  </view>
</template>

<script>
  // #ifdef  APP-PLUS
  import _sql from '@/util/sql.js';
    // #endif
  import _time from '@/util/getdateTime.js';
	import _pc from '@/util/pc.js';
  import customTabBar from '@/components/customTabBar.vue';
  export default {
  	components: {
  	    customTabBar
  	  },
    data() {
      return {
        loginShow: false,
        userInfo: {},
        img: '/static/avatar.png',
		currentTab:'/pages/user/my',
        vuex_user: '',
        bookshelf: [],
        sqllist: [],
        time: 0,
        config: {},
        tt: '0分',
		date:""
      }
    },
    onShow() {
		_pc.system()
      this.userInfo = uni.getDeviceInfo()
      this.info()
      this.config = uni.getStorageSync('config');
	  this.date=_time.timestampToTime()
	console.log(_time.timestampToTime())
     uni.setStorageSync('adis',0)
 
    },
	onShareAppMessage(res) {
	    
	    return {
	      title: '搜索更多-免费小说畅读',
	      path: '/pages/book_mall/index'
	    }
	},
    onReady() {
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
      })
    },
    methods: {
      info() {

        this.bookshelf = uni.getStorageSync('bookshelf_list')
        var _this = this;
		// #ifdef  APP-PLUS
        _sql.selectSQL("select * from " + this.dbs + "").then(function(res) {

          _this.sqllist = res
        });
		// #endif 
		// #ifdef  MP
		
		this.sqllist = uni.getStorageSync('shuyuan')
		
		
		// #endif 
        let data = uni.getStorageSync('bookshelf_time')
        this.time = 0
        for (let i = 0; i < data.length; i++) {
          this.time += data[i].time
        }
		this.tt = _time.getInervalHour(_time.dtime(), uni.getStorageSync('config_time'))
      },
      formatSeconds(value) {
        var theTime = parseInt(value); // 秒
        var theTime1 = 0; // 分
        var theTime2 = 0; // 小时
        if (theTime > 60) {
          theTime1 = parseInt(theTime / 60);
          theTime = parseInt(theTime % 60);
          if (theTime1 > 60) {
            theTime2 = parseInt(theTime1 / 60);
            theTime1 = parseInt(theTime1 % 60);
          }
        }
        var result = "" + parseInt(theTime) + this.$t('user.m');
        if (theTime1 > 0) {
          result = "" + parseInt(theTime1) + this.$t('user.f') + result;
        }
        if (theTime2 > 0) {
          result = "" + parseInt(theTime2) + this.$t('user.h') + result;
        }
        return result;
      },
      onClick(item) {
        if (item === 'book_list') {
          uni.navigateTo({
            url: '/pages/bookshelf/edit'
          });
        }
        if (item === 'about') {
          uni.navigateTo({
            url: '/pages/about/about'
          });
        }
        if (item === 'guize') {
          uni.navigateTo({
            url: '/pages/user/guize'
          });
        }
        if (item === 'help') {
          uni.navigateTo({
            url: '/pages/user/help'
          });
        }
        if (item === 'task') {
          uni.navigateTo({
            url: '/pages/user/task/index'
          });
        }
        if (item === 'ment') {
          uni.navigateTo({
            url: 'ment'
          });
        }
        if (item == 'timeall') {

          uni.navigateTo({
            url: 'timeall'
          });

        }
        if (item === 'Source') {

          uni.navigateTo({
            url: 'yuanlist'
          });
        }
        if (item === 'jilu') {
          uni.showToast({
            title: this.$t('user.allqk'),
            icon: 'none',
            duration: 2000
          });
          uni.clearStorage();
          uni.removeStorageSync('history')
        }
        if (item === 'shukudata') {
          uni.showToast({
            title: this.$t('user.allqk'),
            icon: 'none',
            duration: 2000
          });
          uni.removeStorageSync('books_data')
          uni.removeStorageSync('home_channel')
          uni.removeStorageSync('list_data')
          uni.removeStorageSync('list_cat')
          uni.removeStorageSync('top_data')
        }

        if (item === 'bookshelf_time') {

          uni.showModal({
            title:this.$t('user.yd_time'),
            confirmColor: '#fc4d06',
            cancelColor: '#fc4d06',
            content: this.$t('user.qrall'),
            success: function(res) {
              if (res.confirm) {
                uni.showToast({
                  title: this.$t('user.allqk'),
                  icon: 'none',
                  duration: 2000
                });
                // uni.clearStorageSync();
                // uni.clearStorage();
                uni.removeStorageSync('bookshelf_time')
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          });

        }
      },
      loginClick() {
        if (!this.vuex_user) {
          this.loginShow = true
          return
        }
      }, 
      // 登录
      getUserInfo() {
        var that = this
        wx.getUserProfile({
          desc: '更新您的个人信息',
          success: (res) => {
            console.log(res)
            this.userInfo = res.userInfo
            that.loginShow = true
          },
          fail(err) {
            uni.showToast({
              icon: 'none',
              title: '授权失败',
              duration: 1500
            })
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  .user {
    .avatar {
      width: 116rpx;
      height: 116rpx;
      border-radius: 116rpx;
    }

    .name {
      font-size: 20px;
      font-weight: 500;
    }

    .u-font-18 {
      width: 520rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .integral {
    height: 180rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;
    margin-top: 40rpx;
    border-radius: 20rpx;
    background: linear-gradient(to right, #F74F0E, #F79F1E);

    image {
      width: 60rpx;
      height: 60rpx;
    }

    .left {
      padding-left: 12rpx;
      font-size: 28rpx;
      margin-bottom:20rpx; 
      color: #fff;
      font-weight: bold;
    }

    .right {
      margin-top: 80rpx;
      margin-right: 10rpx;
      width:100rpx;
      font-size: 25rpx;
      color: #ffb000;
    }
    .textwith{
      width:30rpx;
      display:block;
      position: relative;
     }
    .arror {
      width: 15rpx;
      height: 15rpx;
      margin-top: 80rpx;
      border-top: 3rpx solid #ffb000;
      border-right: 3rpx solid #ffb000;
      transform: rotate(45deg);
    }

  }

  .earn {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;

    image {
      width: 60rpx;
      height: 60rpx;
    }

    .tab {
      box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
      position: relative;
      background-color: #FFFFFF;
      border-radius: 20rpx;
      height: 160rpx;
      width: 330rpx;

      // margin-right: 20rpx; 
      .title {
        font-weight: 550;
      }

      .icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 80rpx;

      }
    }
  }

  .border-box {
    box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
    border-radius: 20rpx;
  }

  .menu {
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .border-bottom {
    border-bottom: 1rpx solid #ffffff;
  }

  .hover-class {
    transform: scale(0.95);
    transition: all 0.2s;
  }

  .hover-class1 {
    background-color: linear-gradient(to right, #ffafbd, #ffc3a0);
  }

  .arror-right {
    width: 15rpx;
    height: 15rpx;
    border-top: 3rpx solid #ffb13c;
    border-right: 3rpx solid #ffb13c;
    transform: rotate(45deg);
  }

  .quit {
    color: #fa6868;
  }

  .loading_page {
    image {
      width: 200rpx;
      height: 200rpx;
    }
  }
</style>
